import React, { useRef, useEffect } from 'react';
import { useFrame } from '@react-three/fiber';
import { Text } from '@react-three/drei';
import * as THREE from 'three';

interface CodonTargetProps {
  position: [number, number, number];
  codon: string; // 例如: "AUG"
  userData?: { [key: string]: any }; // 添加 userData 属性定义
  isPaired: boolean; // 添加 isPaired prop
  // TODO: 添加其他 props，如高亮状态等
}

export function CodonTarget({ position, codon, userData, isPaired }: CodonTargetProps) {
  const meshRef = useRef<THREE.Mesh>(null);
  const materialRef = useRef<THREE.MeshStandardMaterial>(null);

  useEffect(() => {
    if (meshRef.current) {
      meshRef.current.userData = userData || {};
    }
  }, [userData]);

  // 更新材质颜色和发光效果
  useEffect(() => {
    if (materialRef.current) {
      materialRef.current.color.set(isPaired ? '#00ff00' : '#007bff');
      materialRef.current.emissive.set(isPaired ? '#00ff00' : '#000000');
      materialRef.current.emissiveIntensity = isPaired ? 0.5 : 0;
    }
  }, [isPaired]);

  // 添加呼吸动画效果
  useFrame((state) => {
    if (meshRef.current && materialRef.current) {
      const time = state.clock.getElapsedTime();
      const scale = 1 + Math.sin(time * 2) * 0.05;
      meshRef.current.scale.set(scale, scale, scale);

      // 更新发光强度
      if (!isPaired) {
        materialRef.current.emissiveIntensity = Math.sin(time * 2) * 0.2;
      }
    }
  });

  // TODO: 添加高亮状态的视觉反馈，例如颜色变化或边框

  return (
    <mesh ref={meshRef} position={position}>
      {/* 使用简单的 BoxGeometry 作为密码子的可视化表示 */}
      <boxGeometry args={[1.5, 1.5, 0.5]} />
      <meshStandardMaterial
        ref={materialRef}
        color="#007bff"
        transparent
        opacity={0.6}
        metalness={0.5}
        roughness={0.5}
      />
      {/* 添加文字标签 */}
      <mesh position={[0, 0, 0.3]}>
        <planeGeometry args={[1.2, 0.4]} />
        <meshBasicMaterial color="#ffffff" transparent opacity={0.8} />
      </mesh>
      {/* 使用 drei 的 Text 组件显示密码子文本 */}
      <Text
        position={[0, 0, 0.4]}
        fontSize={0.4}
        color="#000000"
        anchorX="center"
        anchorY="middle"
      >
        {codon}
      </Text>
    </mesh>
  );
} 